<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>班主任管理界面</title>
    {% load staticfiles %}
    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
    <script src="/static/bootstrap/js/jquery.min.js"></script>
    <script src="/static/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<!-- 导航栏 -->
<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
    <div class="navbar-header">
        <a class="navbar-brand" href="#">学生信息管理</a>
    </div>
    <div>
        <ul class="nav navbar-nav">
            <li><a href="/home">主页</a></li>
            <li class="active"><a href="user">班主任</a></li>
            <li ><a href="graph">图形区</a></li>
        </ul>
    </div>
    <div class="navbar-right">
        <ul class="nav navbar-nav">
            <li><a href="#">当前班主任：</a></li>
            <li><a href="#">{{request.session.name}}</a></li>
            <li><a href="/home/outlogin">注销</a></li>
        </ul>
    </div>
    </div>
</nav>
<div class="panel panel-success">
    <div class="panel-heading">
        <h3 class="panel-title"> 管理人员</h3>
    </div>
    <div class="panel-body">
            <table class="table table-responsive table-hover table-striped" id="tr" style="text-align: center;">
        <tr>
            <th class="text-center">主键ID</th>
            <th class="text-center">用户名</th>
            <th class="text-center">登录密码</th>
        </tr>
        </table>
    </div>
    <div class="panel-footer text-right">
             版权所有&copy;踏雪无痕
    </div>
</div>
</body>
<script>
        $.ajax({
            url:"http://127.0.0.1:8000/select_user",
            type:"GET",
            {#发送json数据到服务器#}
            dataType :"json",
            {#请求成功回调函数#}
            success:function (data) {

                var html = '';
				for ( var i = 0; i < data.length; i++) {//循环json对象，拼接tr,td的htm
					s = "<tr><td>" + data[i].主键ID + "</td><td>" + data[i].用户名 + "</td><td>" +
            data[i].密码 + "</td></tr>";

					$('#tr').append(s);
				}
				 for ( var k in data ){
                console.log(k)
            }

            },
            {#请求失败回调函数#}
            error:function () {
                alert("查询失败")
            }

        });
</script>
</html>